<template>
  <div class="app-container">
    <!-- 检索条件 -->
    <el-card class="filter-container">
      <el-form :inline="true" :model="queryData">
        <el-form-item label="账号">
          <el-input v-model="queryData.username" style="width: 200px" class="filter-item" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="queryData.sex" placeholder="请选择性别" class="filter-item">
            <el-option v-for="item in sex" :key="item.label" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="queryData.realName" style="width: 200px" class="filter-item" placeholder="请输入姓名" />
        </el-form-item>
        <div class="filter-button-container">
          <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
          <el-button type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
          <el-button type="primary" icon="el-icon-download" @click="handleFilter">导出</el-button>
        </div>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card>

      <el-table :data="list">
        <el-table-column label="ID" width="200">
          <template slot-scope="{row}">
            <span>{{ row.userId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="账号">
          <template slot-scope="{row}">
            <span>{{ row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="邮箱">
          <template slot-scope="{row}">
            <span>{{ row.email }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号">
          <template slot-scope="{row}">
            <span>{{ row.phonenumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="handleShow">查看</el-button>
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin: 20px"
        background
        :total="page.total"
        :current-page="page.current"
        :page-size="page.size"
        layout="prev, pager, next,total"
        @current-change="getList"
      />
    </el-card>

    <!-- 编辑 -->
    <el-dialog :title="formMate[editStatus]" :visible.sync="editVisible">
      <el-form :model="form" class="width:400px">
        <el-form-item label="姓名">
          <el-input v-model="form.username" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUserList, getUserOfId, saveUser } from '@/api/user'

export default {
  name: 'User',
  data: function() {
    return {
      editStatus: 'create',
      editVisible: false,
      formMate: {
        create: '添加',
        update: '编译'
      },
      queryData: {
        page: 1
      },
      form: {
        id: null,
        username: ''
      },
      sex: [{ label: '男', 'value': 1 }, { label: '女', lave: 2 }],
      page: {
        total: 0,
        current: 1,
        size: 10
      },

      list: []
    }
  },
  created: function() {
    this.getList(this.$route.params)
  },
  beforeRouteUpdate: function(to, from, next) {
    next()
  },
  methods: {
    getList(queryData) {
      this.queryData = { ...this.queryData, ...queryData }
      getUserList(this.queryData).then(response => {
        this.page.total = response.total
        this.list = response.rows
      })
    },
    handleFilter() {
      this.queryData.page = 1
      this.getList()
    },
    handleCreate() {
      this.editVisible = true
      this.editStatus = 'create'
    },
    handleEdit(row) {
      this.editVisible = true
      this.editStatus = 'update'
      getUserOfId(row.id).then(response => {
        this.form = response.data
      })
    },
    handleSubmit() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      saveUser(this.form).then(response => {
        loading.close()
        this.editVisible = false
      })
    },
    handleShow() {
      this.editVisible = true
    }
  }
}
</script>

<style>
  .text {
    color: aliceblue;
  }
</style>
